<template>
	<div class="booksgit">
		<div class="tablist">
			<div class="swiper-container presslist">
				<ul class="tab swiper-wrapper">
					<li class="swiper-slide">全部</li>
					<li @click="findPress(item,i)" class="swiper-slide" name="press" v-for="(item,i) in pressList"
						:key="i" style="border-bottom: 1px dotted white; margin-left: 15px; ">
						{{item.maker}}
					</li>
				</ul>
			</div>
			<hr />
			<!-- 出版时间 -->
			<div class=" swiper-container presslist">
				<ul class="tab swiper-wrapper">
					<li class="swiper-slide">全部</li>
					<li @click="findDatas(item,i)" name="datas" class="swiper-slide" v-for="(item,i) in publicationDate"
						:key="i" style="border-bottom: 1px dotted white;margin-left: 15px;">
						{{item}}&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
					</li>
				</ul>
			</div>

			<!--  -->
		</div>
	</div>
</template>

<script>
	import Swiper from 'swiper';
	import MobilefindBooks from './MobilefindBooks.vue';
	export default {
		name: 'MobildBooksGit',
		components: {
			MobilefindBooks
		},
		data() {
			return {

				pressList: [],
				publicationDate: [],

			}
		},
		methods: {
			findPress(item, i) {

				console.log(item);
				let d = document.getElementsByName("press");
				console.log(d[i]);
				d.forEach((item) => {
					item.style.color = "#715e3e";
				});
				d[i].style.color = "white";
			},
			findDatas(item, i) {

				console.log(item);
				let d = document.getElementsByName("datas");
				console.log(d[i]);
				d.forEach((item) => {
					item.style.color = "#715e3e";
				});
				d[i].style.color = "white";
			},
			findBooks(item, i) {

				console.log(item);
				let d = document.getElementsByName("books");
				console.log(d[i]);
				d.forEach((item) => {
					item.style.color = "#715e3e";
				});
				d[i].style.color = "white";
			},

		},
		mounted() {
			let maxYear = new Date().getFullYear();
			for (let i = 2019; i <= 2024; i++) {
				this.publicationDate.push(i);
			}
			// 调用轮播对象
			new Swiper('.presslist', {
				// 调整轮播项之间的间距
				spaceBetween: 20,
				// 设置根据宽度自动显示的轮播项数量
				slidesPerView: 'auto',
			});
			this.$get("/api/public/findPageBook/1/13/0").then((resp) => {
				console.log(resp.data.data);
				this.pressList = resp.data.data.books;
			})
		}
	}
</script>

<style scoped>
	.booksgit {
		width: 100%;

		background-color: #f5d5a0;
	}

	.booksgit .tablist {
		width: 95%;
		margin: 0 auto 1rem;
		border-top: 1px dotted white;

	}

	.booksgit .tablist .tab {

		height: 2.5rem;
		line-height: 2.5rem;

	}

	.booksgit .tablist .tab li {
		font-size: 0.875rem;
		/* 不设置任何宽度，包括 0 */
		width: unset;
		color: #715e3e;
	}
</style>
